<template>
	<view class="video-container">
		<!-- 返回 -->
		<view class="back-box" @tap="back">
			<uni-icons type="back" size="30" color="#fff"></uni-icons>
		</view>
		<video :style="{height: videoListCom.realHeight + 'rpx'}" :src="videoInfo.video_url" autoplay :controls="false" loop></video>
		<!-- <my-player appid="" :fileid="videoInfo.id" playerid="myPlayerId"></my-player> -->
		<!-- 右侧图标区 -->
		<!-- <view class="right-icon-bar">
			<view class="right-icon-box" @tap='videolists(videoInfo)'>
				<image src="/static/images/icon-images/icon.png" mode=""></image>
			</view>
			<view class="right-icon-box" @tap="thumbsUp(videoInfo, videoInfo.id)">
				<image src="/static/images/icon-images/icon2.png" mode=""></image>
				<view class="count">{{videoInfo.likes || '0'}}</view>
			</view>
			<view class="right-icon-box" @tap="chatfun(i, videoInfo.id)">
				<image src="/static/images/icon-images/icon3.png" mode=""></image>
				<view class="count">{{videoInfo.comments || '0'}}</view>
			</view>
			<view class="right-icon-box">
				<button style="background-color: transparent;" open-type="share" v-bind:data-student="videoInfo"
					class="share">
					<image src="/static/images/icon-images/icon4.png" mode=""></image>
				</button>
				<view class="count">{{videoInfo.forwardings || '0'}}</view>
			</view>
		</view> -->
		<!-- 右侧图标区 -->
		<!-- <view class="video-msg-box">
			<view class="video-avatar-box">
				<view class="avatar-box">
					<view class="avatar">
						<image :src="videoInfo.author.head_portrait" mode=""
							@tap.stop="toInfoTeacher(videoInfo.author.id)"></image>
					</view>
					<view class="name" v-if="active < 2">{{videoInfo.author.nickname || ''}}</view>
					<view class="name" v-else>{{videoInfo.author || ''}}</view>
					<image @tap='subscribe(videoInfo.author.id)' class="add-image"
						src="/static/images/icon-images/jia.png" mode=""></image>
				</view>
			</view>
			<view class="title">
				{{videoInfo.title || ''}}
			</view>
			<view class="content-box" @tap="groupContent(videoInfo.group)">
				<image class="book-icon" src="/static/images/icon-images/book.png" mode=""></image>
				<view class="tip">
					课程合集《低碳饮食全攻略》
				</view>
				<image class="more" src="/static/images/icon-images/more.png" mode=""></image>
			</view>
		</view> -->

		<!-- 视频合集 groupList -->
		<uni-popup ref="group-list" type="bottom" style="z-index: 20000;">
			<view class="morevideo">
				<view class="video-title-close">
					<view class="video-list-name">
						<view class="video-title-icon"></view>
						<text class="video-title">课程合集</text>
					</view>
					<uni-icons type="close" size="22" color="#707070" @click="groupClose"></uni-icons>
				</view>
				<view class="video-lsits">
					<scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 800rpx;">
						<view class="video-list-items" v-for="(item, i) in groupList" :key="i" @tap="toPlayVideo(item)">
							<view class="video-list-items-img">
								<image :src="item.cover_url" style="width: 260rpx;height: 210rpx;border-radius: 20rpx;"
									mode="aspectFill"></image>
								<view class="video-list-items-img-time">
									<text
										style="color: #FFFFFF;font-size: 20rpx;">{{item.video_time | filterVideoTime}}</text>
								</view>
							</view>
							<view class="video-list-items-desc">
								<text style="color: #1A1A1A;font-weight: bold;">{{item.title || ''}}</text>
								<text style="color: #4D4D4D;">{{item.describe || ''}}</text>
								<view class="video-list-items-desc-price">
									<text style="color: #B91C27;">￥{{item.price}}</text>
									<!-- <uni-icons type="cart-filled" size="20" color="#B91C27"></uni-icons> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 更多视频 -->
		<uni-popup ref="popup_video" type="bottom" style="z-index: 20000;">
			<view class="morevideo">
				<view class="video-title-close">
					<view class="video-list-name">
						<view class="video-title-icon"></view>
						<text class="video-title">总的课程名称</text>
					</view>
					<uni-icons type="close" size="22" color="#707070" @tap="videoclose"></uni-icons>
				</view>
				<view class="video-lsits">
					<scroll-view :scroll-y="true" :show-scrollbar="false"
						:style="{height : payment.shop_id ? '700rpx' : '800rpx'}">
						<view :class="['video-list-items', item.isClick ? 'active-bg' : '']"
							v-for="(item, i) in payMentList" :key="i" @tap="payMoney(item.id, item.price, i)">
							<view class="video-list-items-img">
								<image :src="item.cover_url" style="width: 260rpx;height: 210rpx;border-radius: 20rpx;"
									mode="aspectFill"></image>
								<!-- <view class="video-box">
									<video :src="item.video_url" objectFit="fill"></video>
								</view> -->
								<view class="video-list-items-img-time">
									<text
										style="color: #FFFFFF;font-size: 20rpx;">{{item.video_time | filterVideoTime}}</text>
								</view>
							</view>
							<view class="video-list-items-desc">
								<text style="color: #1A1A1A;font-weight: bold;">{{item.title || ''}}</text>
								<text style="color: #4D4D4D;">{{item.describe || ''}}</text>
								<view class="video-list-items-desc-price">
									<text style="color: #B91C27;">￥{{item.price}}</text>
									<uni-icons type="cart-filled" size="20" color="#B91C27"></uni-icons>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 结算按钮 -->
				<view class="price-box" v-if="payment.shop_id">
					<view class="left-radio">
						<label class="radio">
							<radio :checked="isAllChecked" value="1" @tap="radioChange" />
							<text class="title">全选</text>
						</label>
					</view>
					<view class="amount-box">
						<text class="amount">合计：</text>
						<text class="price">{{allMoney}}</text>
					</view>
					<view class="confirm-btn" @tap="payMoneyprice">
						立即结算
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 评论 -->
		<uni-popup ref="popup_chat" type="bottom" style="z-index: 20000;">

			<view class="comments">
				<view class="comments-title-close">
					<text style="font-size: 36rpx;letter-spacing: 4rpx;">{{commentAmount}}条评论</text>
					<uni-icons type="close" size="22" color="#707070" class="popup-close" @click="commentclose">
					</uni-icons>
				</view>
				<scroll-view scroll-y="true" style="width: 100%;height: 600rpx;">
					<view class="comments-contents">
						<view class="comments-detail-item" v-for="(item, i) in commentList" :key="i">
							<image :src="item.member.head_portrait" mode="aspectFit"
								style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
							<view class="comments-detail-text">
								<text style="font-size: 30rpx;">{{item.member.nickname || ''}}</text>
								<text
									style="font-size: 24rpx;padding: 15rpx 0;color: #999999;">{{item.created_at | filterDay}}</text>
								<view class="comments-detail-text-first">
									<text @tap='commentClick(item.id, item.member.nickname)'>{{item.text || ''}}</text>
									<view class="comments-detail-text-dianzan" @tap="giveThumbsUp(item.id)">
										<uni-icons type="heart-filled" color="#CFCFCF"></uni-icons>
										<text style="color: #737373;font-size: 20rpx;">{{item.likes || '0'}}</text>
									</view>
								</view>
								<!-- 第二层评论 -->
								<view class="comment-second-box">
									<view class="comment-second-item" v-for="(item1, i1) in item.comments" :key='i1'>
										<template v-if="showAllComments ? true : (i1 == 0)">
											<view class="avatar-box">
												<view class="avatar">
													<image :src="item1.member.head_portrait" mode=""></image>
												</view>
												<view class="nickname">{{item1.member.nickname}}</view>
											</view>
											<view class="time">{{item1.created_at | filterDay}}</view>
											<view class="test">{{item1.text || ''}}</view>
										</template>

									</view>
									<view class="more" v-if="item.comments && item.comments.length > 1"
										@tap='allCommentsShow'>
										{{showAllComments ? '收起' : '-查看全部回复-'}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
				<view class="comments-send">
					<input @focus="btnchangeon" @blur="btnchangeoff" class="comments-send-input" type="text"
						v-model.trim="sendCommentQuery.text" :placeholder="placeholder" />
					<text :class="commentsSendBtn" @click="commentSendText">
						<text>发送</text>
					</text>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		timestampToTime,
		follow_status
	} from '@/api/api.js'
	export default {
		data() {
			return {
				videoInfo: {}, // 请求到的数据
				receiveInfo: {}, // 接收到得数据
				// 视频滑块配置
				vertical: true,
				// 评论按钮
				commentsSendBtn: 'comments-send-btn',

				// 视频列表参数
				videoQuery: {
					classify: '',
					offset: 1,
					limit: 10
				},
				videoList: [],
				total: 0,
				text: '',
				active: 0,
				navList: [],
				navCount: 0,
				// 关注视频参数
				followQuery: {
					last_id: ''
				},
				// 评论参数
				commentQuery: {
					id: ''
				},
				commentList: [], // 评论列表
				// 提交评论参数
				sendCommentQuery: {
					shop_id: '',
					text: '',
					comment_id: 0, // 引用评论 id 默认0 
					level: 0 // 引用层级 默认 0 
				},
				videoID: '',
				commentAmount: 0,
				payment: {
					shop_id: ''
				},
				allMoney: 0,
				apiList: [],
				current: 0,
				playVideoInfo: {},
				currentIndex: 0,
				videoContent: '',
				commentIndex: 0,
				isAllChecked: false,
				placeholder: '您可以在此输入评论...',
				// 是否评论视频
				isCommentVideo: true,

				searchVideoQuery: {
					classify: '',
					offset: 1,
					limit: 10,
					search: ''
				},
				currentNum: 0,
				showAllComments: false, // 是否查看所有评论
				groupQuery: {
					group: '',
					offset: 1,
					limit: 10
				},
				groupList: [],


				// 支付列表 走的合集内容接口
				payMentQuery: {
					group: '',
					offset: 1,
					limit: 10
				},
				payMentList: []
			};
		},
		computed: {
			videoListCom() {
				const videoObject = {
					...this.videoInfo
				}
				videoObject.realHeight = (750 / videoObject.video_width).toFixed(2) * videoObject.video_height
				return videoObject
			}
		},
		onLoad(o) {
			this.receiveInfo = JSON.parse(o.videoInfo)
			console.warn('o.state', o.state)
			if (o.state && o.state == 'show') {
				console.warn('this.receiveInfo', this.receiveInfo)
				this.videoShow(this.receiveInfo.shop.id)
			} else {

				this.videoShow(this.receiveInfo.id)
			}



		},
		filters: {
			filterVideoTime(time) {
				if (!time) {
					return '00:00'
				}
				const second = parseInt(time / 60)
				const minute = (time % 60 + '').slice(0, 2)
				return `${second < 10 ? '0' + second : second}:${minute < 10 ? '0' + minute : minute}`
			},
			filterDay(stamp) {
				if (!stamp) return ''
				let time = follow_status(timestampToTime(stamp * 1000))

				time = time < 1 ? `${time.toFixed(1)}小时前` : `${parseInt(time)}天前`

				return time;
			}
		},
		onShareAppMessage(res) {
			console.log(res)
			if (res.from == 'button') {
				return {
					title: res.target.dataset.student.title,
					imageUrl: res.target.dataset.student.cover_url,
					path: '/pages/index/index',
				}
			}

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 视频显示接口
			async videoShow(id) {
				const res = await this.$http.request('/api/v1/shop/show', {
					id
				}, 'GET')
				console.warn(res)
				if (res.code == 200) {
					this.videoInfo = res.data
					// this.videoList.push({
					// 	...res.data,
					// 	isClick: false
					// })
				}
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},
			// 更多视频
			async videolists(item) {
				this.payMentQuery.group = item.group
				const res = await this.$http.request('/api/v1/shop/group', this.payMentQuery, 'GET')
				if (res.code == 200) {
					this.payMentList = res.data.data
					this.payMentList?.forEach((item, i) => {
						item.isClick = false
					})
				}
				this.$refs.popup_video.open()
			},
			toPlayVideo(item) {
				// this.videoInfo = item
				this.videoShow(item.id)
				this.$refs['group-list'].close()
			},
			// 合集内容
			async groupContent(id) {
				this.$refs['group-list'].open()
				this.groupQuery.group = id
				const res = await this.$http.request('/api/v1/shop/group', this.groupQuery, 'GET')
				if (res.code == 200) {
					this.groupList = res.data.data
					console.log(this.groupList)
				}

			},
			// 关注作者
			async subscribe(id) {
				const res = await this.$http.request('/api/v1/author/subscribe', {
					id
				})
				if (res.code == 200) {
					return uni.$toast('关注成功')
				}
				uni.$toast('关注失败')
			},
			// 发布评论
			async commentSendText() {
				if (!this.sendCommentQuery.text) return
				let res = null
				// 如果评论视频
				if (this.isCommentVideo) {
					res = await this.$http.request('/api/v1/comment/create', this.sendCommentQuery)
					if (res.code == 200) {
						uni.$toast('评论成功')
						this.sendCommentQuery.text = ''
						const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
						if (ress.code == 200) {
							this.commentList = ress.data
							this.commentAmount = ress.data.length || 0
							const timestamp = new Date().getTime() - this.commentList[0].created_at
						}
						this.videoList[this.commentIndex].comments++
						return
					}
					uni.$toast('评论失败')
				} else {
					this.sendCommentQuery.level = 1
					res = await this.$http.request('/api/v1/comment/create', this.sendCommentQuery)
					if (res.code == 200) {
						uni.$toast('评论成功')
						this.sendCommentQuery.text = ''
						const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
						if (ress.code == 200) {
							this.commentList = ress.data
							this.commentAmount = ress.data.length || 0
							const timestamp = new Date().getTime() - this.commentList[0].created_at
						}
						this.videoList[this.commentIndex].comments++
						return
					}
					uni.$toast('评论失败')
				}

			},
			// 评论第二层级
			commentClick(id, nickname) {
				this.isCommentVideo = !this.isCommentVideo
				if (!this.isCommentVideo) {
					this.sendCommentQuery.comment_id = id
					this.placeholder = `回复 @${nickname}: `
				} else {
					this.sendCommentQuery.comment_id = 0
					this.placeholder = '您可以在此输入评论...'
				}
			},
			// 评论框输入时，按钮变色
			btnchangeon() {
				this.commentsSendBtn = 'comments-send-btn-active'
			},
			btnchangeoff() {
				this.commentsSendBtn = 'comments-send-btn'
			},
			commentclose() {
				this.$refs.popup_chat.close()
			},
			// 点赞功能
			async thumbsUp(item, id) {
				const res = await this.$http.request('/api/v1/shop/like', {
					id
				})
				if (res.code == 200) {
					if (res.data == '点赞成功') {
						this.videoInfo.likes++
					} else {
						this.videoInfo.likes--
					}
					return
				}
				uni.$toast('点赞失败')
			},
			// 评论
			async chatfun(i, id) {
				this.commentIndex = i
				this.commentQuery.id = id
				this.sendCommentQuery.shop_id = id
				this.$refs.popup_chat.open()
				const res = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
				if (res.code == 200) {
					this.commentList = res.data
					this.commentAmount = res.data.length || 0
					// 
					const timestamp = new Date().getTime() - this.commentList[0].created_at
				}
			},
			groupClose() {
				this.$refs['group-list'].close()
				this.showMark = false
			},
			videoclose() {
				this.$refs.popup_video.close()
			},
			// 跳转老师个人信息
			toInfoTeacher(id) {
				const token = uni.getStorageSync('acess_token')
				if (token) {
					uni.navigateTo({
						url: '/pages/teacher/teacher?id=' + id
					})
				}
			},
			// 评论点赞
			async giveThumbsUp(comment_id) {
				const res = await this.$http.request('/api/v1/comment/like', {
					comment_id
				})
				if (res.code == 200) {
					// uni.$toast('点赞成功')
					const ress = await this.$http.request('/api/v1/shop/comment', this.commentQuery, 'GET')
					if (ress.code == 200) {
						this.commentList = ress.data
						this.commentAmount = ress.data.length || 0
						const timestamp = new Date().getTime() - this.commentList[0].created_at
					}
					return
				}
				// uni.$toast('点赞失败')
			},
			// 支付
			payMoney(id, price, i) {
				this.payment.shop_id = ''
				this.allMoney = 0
				const query = {
					...this.payMentList[i],
					isClick: !this.payMentList[i].isClick
				}
				this.payMentList.splice(i, 1, query)
				this.payMentList.forEach((item, index) => {
					if (item.isClick) {
						this.apiList.push(item.id)
						this.payment.shop_id = this.apiList.join(',')
						this.allMoney += +(item.price)

					}
				})
				this.allMoney = this.allMoney.toFixed(2)
				const result = this.payMentList.filter((item, i) => !item.isClick)
				if (result.length == 0) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
			},
			// 立即结算 提交订单
			async payMoneyprice() {
				const res = await this.$http.request('/api/v1/order', this.payment)
				if (res.code == 200) {
					const ress = await this.$http.request('/api/v1/pay', {
						data: JSON.stringify(res.data)
					})
					if (ress.code == 200) {
						// 仅作为示例，非真实参数信息。
						console.warn(ress.data.config)
						console.warn(Date.parse(new Date()) + '')
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: ress.data.config.timestamp,
							nonceStr: ress.data.config.nonceStr,
							package: ress.data.config.package,
							signType: ress.data.config.signType,
							paySign: ress.data.config.paySign,
							success(res) {
								console.log('success:' + JSON.stringify(res));
							},
							fail(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				}
			},
			radioChange(e) {
				console.log(e)
				this.allMoney = 0
				this.apiList = []
				this.isAllChecked = !this.isAllChecked
				if (!this.isAllChecked) {
					this.payMentList.forEach((item, index) => {
						item.isClick = false
					})
					this.allMoney = 0
				} else {
					this.payMentList.forEach((item, index) => {
						item.isClick = true
						this.apiList.push(item.id)
						this.payment.shop_id = this.apiList.join(',')
						this.allMoney += +(item.price)
						console.log(item.price)
					})
					this.allMoney = this.allMoney.toFixed(2)
				}

			},
			shareWxin(item) {
				uni.showLoading({
					title: '加载中'
				})
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					summary: item.title,

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-container {
		position: relative;
		@include flex-center();
		width: 100%;
		height: 100vh;
		background-color: #000000;
		.back-box {
			position: fixed;
			top: 80rpx;
			left: 30rpx;
			z-index: 9999;
		}

		video {
			width: 100%;
			// height: 100%;
		}

		.right-icon-bar {
			position: absolute;
			right: 40rpx;
			bottom: 100rpx;
			z-index: 999;

			.right-icon-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 44rpx;

				.share {
					background-color: rgba($color: #fff, $alpha: 0);
					border: none;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.count {
					font-size: 26rpx;
					font-weight: 500;
					color: #E0E0E0;
				}
			}
		}

		/* 更多视频 */
		.morevideo {
			position: relative;
			height: 900rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: white;
			padding: 20rpx;

			.price-box {
				@include flex-between(100%, 120rpx);
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #FFFFFF;
				box-shadow: 5rpx 0 10rpx rgba($color: #000000, $alpha: .3);
				padding: 0 20rpx 0 46rpx;
				z-index: 9999;

				.left-radio {
					.title {
						margin-left: 16rpx;
						font-size: 28rpx;
						color: #4D4D4D;
					}
				}

				.amount-box {
					display: flex;
					align-items: center;

					.amount {
						font-size: 28rpx;
						color: #4D4D4D;
						margin-right: 8rpx;
					}

					.price {
						font-size: 24rpx;
						color: #B91C27;
					}
				}

				.confirm-btn {
					@include flex-center(318rpx, 88rpx);
					background: #B91C27;
					border-radius: 44rpx;
					font-size: 36rpx;
					color: #FFFEFE;
				}

			}
		}


		/* 评论 */
		.comments {
			// padding-bottom: 160rpx;
			border: 1rpx solid transparent;
			width: 100%;
			height: 900rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: white;
			padding: 20rpx 20rpx 100rpx;
			color: #4D4D4D;
		}

		.comments-title-close {
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}

		.popup-close {
			position: absolute;
			right: 20rpx;
			top: 40rpx;
		}

		/* 评论内容 */
		.comments-contents {
			display: flex;
			flex-direction: column;
		}

		.comments-detail-item {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding-bottom: 40rpx;
		}

		.comments-detail-text {
			display: flex;
			flex-direction: column;
			width: 86%;
		}

		.comments-detail-text-first {
			position: relative;
			display: flex;
		}

		.comments-detail-text-dianzan {
			position: absolute;
			top: -5rpx;
			right: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding-left: 20rpx;
		}

		/* 发送评论 */
		.comments-send {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			margin-top: 40rpx;
			position: absolute;
			bottom: 0rpx;
		}

		.comments-send-input {
			background-color: #F0EFF5;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			height: 70rpx;
			width: 75%;
			border-radius: 40rpx;
		}

		.comments-send-btn {
			padding: 10rpx 30rpx;
			background-color: #E2E0EA;
			color: #989898;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			height: 50rpx;
		}

		.comments-send-btn-active {
			padding: 10rpx 30rpx;
			background-color: #B91C27;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			height: 50rpx;
		}

		.comment-second-box {
			margin-top: 24rpx;

			.comment-second-item {
				margin-bottom: 20rpx;

				.avatar-box {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;

					.avatar {
						width: 34rpx;
						height: 34rpx;
						margin-right: 15rpx;

						&>image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.nickname {
						font-size: 24rpx;
						color: #4D4D4D;
					}
				}

				.time {
					padding-left: 48rpx;
					font-size: 20rpx;
					color: #999999;
					margin-bottom: 20rpx;
				}

				.test {
					padding-left: 48rpx;
					font-size: 24rpx;
					color: #4D4D4D;
				}


			}

			.more {
				margin-top: 34rpx;
				font-size: 26rpx;
				color: #808080;
			}
		}

		.title-bar {
			color: #FFFFFF;
			padding-left: 20rpx;
			font-weight: bold;
			font-size: 40rpx;
		}

		/* 课程列表 */
		.video-list-items {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
		}

		.active-bg {
			box-shadow: 0 5rpx 15rpx rgba($color: #000000, $alpha: .3);
		}

		.video-list-items-img {
			position: relative;

			.video-box {
				width: 240rpx;
				height: 198rpx;
			}

			.video {
				width: 100%;
				height: 100%;
			}
		}

		.video-list-items-img-time {
			background-color: rgba(0, 0, 0, 0.4);
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 20rpx 0 50rpx 0;
			z-index: 9999;
		}

		.video-list-items-desc {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 40rpx;
			height: 210rpx;
		}

		.video-list-items-desc-price {
			display: flex;
			justify-content: space-between;
		}

		.main-container-list {
			padding: 280rpx 23rpx 30rpx;
			width: 100%;
			min-height: 100vh;
			overflow: auto;
			// height: 100%;
			// border: 1rpx solid red;
			// background-color: #EFEEF5;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.main-container-item,
			.main-container-item-s {
				position: relative;
				background-color: #FFFFFF;
				width: 345rpx;
				height: 546rpx;
				border-radius: 10rpx;
				margin-bottom: 14rpx;

				.main-video-time {
					@include flex-center(108rpx, 41rpx);
					position: absolute;
					top: 0;
					left: 0;
					background: rgba($color: #000000, $alpha: .3);
					border-radius: 8rpx 0px 41rpx 0px;
					font-size: 20rpx;
					color: #FFFFFF;
					z-index: 99;
				}

				.main-img-box,
				.main-img-box-s {
					width: 100%;
					height: 310rpx;
					border-radius: 10rpx;
					margin-bottom: 28rpx;
					overflow: hidden;

					&>video,
					&>image {
						width: 100%;
						height: 100%;
					}
				}

				.main-img-box-s {
					height: 254rpx;
				}

				.main-title {
					padding-left: 9rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.main-content {
					@include more-over-ellip(2);
					padding-left: 9rpx;
					width: 304rpx;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 44rpx;
				}

				.main-nick {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					text {
						margin-right: 24rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}

			}

			.main-container-item-s {
				height: 487rpx;

			}
		}

		.video-title-close {
			box-sizing: border-box;
			padding-top: 10rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.video-list-name {
			display: flex;
			align-items: center;
		}

		.video-title {
			font-weight: bold;
			color: #4D4D4D;
			letter-spacing: 2rpx;
			box-sizing: border-box;
		}

		.video-title-icon {
			width: 12rpx;
			height: 40rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			background-color: #B91C27;
		}
	}

	.video-msg-box {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		padding: 23rpx;
		z-index: 99;

		.video-avatar-box {
			.avatar-box {
				display: flex;
				align-items: center;

				.avatar {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 21rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 24rpx;
					margin-right: 19rpx;
					color: #FFFFFF;
				}

				.add-image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.title {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.content-box {
			padding-left: 20rpx;
			margin-top: 19rpx;
			position: relative;
			display: flex;
			align-items: center;
			width: 450rpx;
			height: 49rpx;
			background: rgba($color: #000000, $alpha: .2);
			border-radius: 25rpx;

			.book-icon {
				width: 17rpx;
				height: 14rpx;
				margin-right: 6rpx;
			}

			.tip {
				font-size: 20rpx;
				color: #D6D6D6;
			}

			.more {
				width: 17rpx;
				height: 28rpx;
				position: absolute;
				right: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 999;
			}
		}
	}
</style>
